<template>
  <div id="servePage">
    <ModelTitle>
        <template>
            服务包管理
        </template>
    </ModelTitle>
    <div id="servePage-search">
        <el-form ref="form"  label-width="80px">
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="服务状态">
                        <el-select v-model="value1" placeholder="请选择" @change="serveStaFn">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                        </el-select>
                        </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                </el-col>
                <el-col :span="10">
                    <div class="servePage-btn">
                        <el-button type="primary" @click="addServeFn">新增服务包</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div id="servePage-main">
        <servePageMain/>
    </div>
  </div>
</template>

<script>
import ModelTitle from '../../components/ModelTitle.vue'
import servePageMain from '../../components/Datas/servePageMain.vue'
export default {
    created(){
        document.querySelector('body').setAttribute('style', 'background-color:#F2F7FB')
    },
    components:{
        ModelTitle,servePageMain
    },
    data() {
        return {
            input:"",
            options1: [
                {
                value: 1,
                label: '使用中'
                }, {
                value: 2,
                label: '待审核'
                }, {
                value: 3,
                label: '已驳回'
                }, {
                value: 4,
                label: '已停用'
                }
            ],
            value1: '',
        }
    },
    methods:{
        addServeFn(){
            this.$router.push({
                path:"/addServePage"
            })
        }
    }
}
</script>

<style>
    #servePage{
        width: 1150px;
        padding: 0 10px;
        box-sizing: border-box;
        margin: 20px auto;
        background: white;
    }
    .servePage-btn{
        display: flex;
        justify-content: flex-end;
    }
    #servePage-search{
        margin-top: 15px;
    }
</style>